import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  // 插件配置
  plugins: [
    vue(), // Vue 3 支持
    vueDevTools(), // Vue 开发者工具
  ],
  
  // 路径解析配置
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)) // 设置 @ 指向 src 目录
    },
  },
  
  // 开发服务器配置
  server: {
    host: '0.0.0.0', // 监听所有地址，包括局域网和公网地址
    port: 3000, // 开发服务器端口
    open: true, // 启动时自动打开浏览器
    // cors: true, // 启用跨域资源共享
    // proxy: {
    //   // API 代理配置，解决开发环境跨域问题
    //   '/api': {
    //     target: 'http://localhost:8080', // 后端服务器地址
    //     changeOrigin: true, // 改变请求头中的 origin 值
    //     rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉 /api 前缀
    //   }
    // }
  },
  
  // 构建配置
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源目录
    sourcemap: false, // 生产环境不生成 sourcemap，提升性能
    minify: 'terser', // 使用 terser 进行代码压缩
    rollupOptions: {
      // 多页面应用入口配置
      input: {
        index: fileURLToPath(new URL('./index.html', import.meta.url)), // 首页
        // 在这里添加其他页面
        admin: fileURLToPath(new URL('./admin.html', import.meta.url)), // 管理后台
        login: fileURLToPath(new URL('./login.html', import.meta.url)), // 登录页
        mobile: fileURLToPath(new URL('./mobile.html', import.meta.url)), // 移动端
        environment: fileURLToPath(new URL('./environment.html', import.meta.url)) // 环境变量显示
      },
      output: {
        // 自定义输出文件名格式，便于缓存管理
        chunkFileNames: 'js/[name]-[hash].js', // 代码分割后的文件名
        entryFileNames: 'js/[name]-[hash].js', // 入口文件名
        assetFileNames: '[ext]/[name]-[hash].[ext]' // 静态资源文件名
      }
    }
  },
  
  // CSS 预处理器配置
  css: {
    preprocessorOptions: {
      scss: {
        // 全局 SCSS 变量文件，所有组件都可以使用
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  },
  
  // 环境变量配置
  /* 
  开发阶段：Vite 会在启动时自动加载根目录下的 .env、.env.development 等文件，把以 VITE_ 开头的变量注入到 import.meta.env，在代码中可以直接用。
  打包阶段：Vite 会在打包时（npm run build）把当前环境的 .env 文件内容“写死”到代码里，打包后不会再读取 .env 文件，也不会动态变化。

  打包前确定好环境变量，每种环境（开发、测试、生产）都准备好对应的 .env 文件，打包时用：

  cp env.production .env
  npm run build

  打包后，环境变量已经被写入代码，无法再通过修改 .env 文件生效。
  */
  envPrefix: 'VITE_', // 只有以 VITE_ 开头的环境变量才会被 Vite 处理
  
  // 依赖预构建配置
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia'] // 预构建这些依赖，提升开发体验
  },
  
  // 预览配置（用于测试构建结果）
  preview: {
    port: 4173, // 预览服务器端口
    open: false // 启动时自动打开浏览器
  }
})
